<template>
  <div>
    <textarea v-model="message"></textarea>
   <button type="button" @click="send(message)">发送</button>
    <textarea v-model="text"></textarea>
  </div>
</template>

<script>
// import * as proto from '@/protobuf/ProtoBufClass_pb.js'

export default {
  name: 'HomePage',
  mounted(){
    this.initWebSocket();
  },
  data(){
    return{
      message:"",
      text:"",
      socket:null
    }
  },
  methods:{

    send(message){
        // 如果连接还存在才执行
        if(this.socket){
          // 判断连接状态
          if(this.socket.readyState  == WebSocket.OPEN){

            // 创建ClassInfo消息对象
            const msg=new  this.$classInfo.ClassInfo();
            console.log(this.$classInfo)
            // 创建User消息对象
            const user = new this.$classInfo.User();
            // 填充数据
            user.setAge(12);
            user.setName("cc");
            // 填入对象包裹中
            msg.setUser(user);

            // const game = new this.$classInfo.Game();
            // game.setPrice(122);
            // game.setName("ccq");
            // msg.setGame(game);
            console.log(message)
           // 序列化消息对象为原始的二进制数据
           const buffer = msg.serializeBinary();
            // 发送数据
            this.socket.send(buffer)
            
          }
           
        }
    },
    initWebSocket(){
      
    // 查看浏览器是否支持websocket
    if(window.WebSocket){
      // 发起连接请求
      this.socket = new WebSocket("ws://localhost:7000/ws")

    // WebSocket连接建立成功的处理函数
    this.socket.onopen = () => {
      // 设置数据类型，非常重要，如果没有就收不到数据了
      this.socket.binaryType = "arraybuffer"
      console.log('WebSocket连接已建立');
    };

    // 读收到的数据，用箭头函数就不会影响到this
      this.socket.onmessage=(ev)=>{
        // 将数据转为可用（或者说更易用）的二进制数组
      const buffer = new Uint8Array(ev.data);
        // 将二进制数组转为ClassInfo对象
      const res = this.$classInfo.ClassInfo.deserializeBinary(buffer);
        // 将ClassInfo对象转为普通对象,方便后续操作
      const qwe=res.toObject();
      // 从中取出需要的数据，填入合适的变量
      this.text=qwe.user.name
      console.log(qwe)
      }

    // WebSocket连接关闭的处理函数
    this.socket.onclose = () => {
      console.log('WebSocket连接已关闭');
    };

    // WebSocket连接发生错误的处理函数
    this.socket.onerror = (err) => {
      console.error('WebSocket连接发生错误:', err);
    };
    }
    }
  },
    beforeDestroy() {
        // 在组件销毁前关闭WebSocket连接
        if (this.socket) {
            this.socket.close();
            console.log("已回收资源")
        }
    }
}
</script>

<style scoped>

</style>
